<template>
  <div>
    <div style="margin: 10px 0">
      <el-input style="width: 200px" placeholder="请输入订单编号" suffix-icon="el-icon-position" class="ml-5" v-model="orderNumber"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
      <el-button type="info" v-if="whetherOnlyShowUnreplied" @click="showAllRequests">显示所有申请</el-button>
      <el-button type="success" v-if="!whetherOnlyShowUnreplied" @click="onlyShowUnrepliedRequests">显示未作回复的申请</el-button>
    </div>

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'">

      <el-table-column prop="orderNumber" label="订单编号">
        <template slot-scope="scope">
          <span class="clickable-text" @click="showOrderDetailDialog(scope.row.orderNumber)">
            {{ scope.row.orderNumber }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="milkteaName" label="饮料名称">
        <template slot-scope="scope">
          <span class="clickable-text" @click="showMilkTeaDetailDialog(scope.row.milkteaId)">
            {{ scope.row.milkteaName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fromCustomerName" label="顾客名称">
        <template slot-scope="scope">
          <span class="clickable-text" @click="showCustomerDetailDialog(scope.row.fromCustomerId)">
            {{ scope.row.fromCustomerName }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="decision" label="商家意见">
        <template #default="{ row }">
          <span :style="getDecisionColor(row.decision)">
            {{ row.decision === true ? '同意' : row.decision === false ? '拒绝' : '尚未决定' }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="申请详情" width="78">
        <template slot-scope="scope">
          <el-button type="primary" @click="showRequestDetailDialog(scope.row)">查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="申请详情" :visible.sync="dialogRequestDetailVisible" width="50%">
      <div style="margin-top: 10px;">
        <span>订单编号：</span>
        <span>{{ selectedRow.orderNumber }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>饮料名称：</span>
        <span>{{ selectedRow.milkteaName }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>顾客名称：</span>
        <span>{{ selectedRow.fromCustomerName }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>顾客手机号码：</span>
        <span>{{ selectedRow.fromCustomerPhone }}</span>
      </div>

      <div style="margin-top: 10px;">
        <span>顾客申请时间：</span>
        <span>{{ selectedRow.requestTime }}</span>
      </div>

      <div style="margin-top: 10px;">
        <span>申请理由：</span>
        <pre>
          <span class="description-span" style="font-weight: bold">{{ selectedRow.requestContent }}</span>
        </pre>
      </div>

      <div style="margin-top: 10px;" v-if="selectedRow.replyId !== 0">
        <span>商家意见：</span>
        <span>{{ selectedRow.decision ? '同意' : '拒绝' }}</span>
      </div>
      <div style="margin-top: 10px;" v-if="selectedRow.replyId !== 0">
        <span>商家回复：</span>
        <span>{{ selectedRow.replyContent }}</span>
      </div>
      <div style="margin-top: 10px;" v-if="selectedRow.replyId !== 0">
        <span>商家回复时间：</span>
        <span>{{ selectedRow.replyTime }}</span>
      </div>

      <div style="margin-top: 10px;" v-if="selectedRow.replyId === 0">
        <span style="font-family: 'Arial', sans-serif; font-weight: 300; color: #db1e1e; text-align: center;">商家尚未作出回复</span>
      </div>

      <el-form label-width="80px" size="small" style="margin-top: 14px" v-if="selectedRow.replyId === 0">
        <el-form-item label="决定">
          <el-select v-model="reply.decision" placeholder="请选择" autocomplete="off">
            <el-option label="同意" :value="true"></el-option>
            <el-option label="拒绝" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回复内容">
          <el-input v-model="reply.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="selectedRow.replyId === 0">
        <el-button @click="dialogReplyVisible = false">取 消</el-button>
        <el-button type="primary" @click="save(selectedRow.requestId)">确 定</el-button>
      </div>

    </el-dialog>

    <el-dialog title="订单详情" :visible.sync="dialogOrderDetailVisible" width="50%">
      <div style="margin-top: 10px;">
        <span>饮料名称：</span>
        <span>{{ order.milkteaName }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>顾客名称：</span>
        <span>{{ order.customerName }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>顾客手机号码：</span>
        <span>{{ order.customerPhone }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>糖度：</span>
        <span>{{ order.sugarLevel }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>冰度：</span>
        <span>{{ order.iceLevel }}</span>
      </div>

      <div style="margin-top: 10px;">
        <span>小料：</span>
        <div>
          <el-tag
              v-for="topping in order.toppings"
              :key="topping"
              style="margin-right: 5px;">
            {{ topping }}
          </el-tag>
        </div>
      </div>

      <div style="margin-top: 10px;">
        <span>下单时间：</span>
        <span>{{ order.orderTime }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>下单状态：</span>
        <span>{{ order.orderStatus }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>饮料完成时间：</span>
        <span>{{ order.completionTime }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>饮料完成状态：</span>
        <span>{{ order.completionStatus }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>取物状态：</span>
        <span>{{ order.placeStatus }}</span>
      </div>

      <div style="margin-top: 10px;">
        <span>置物格号：</span>
        <div>
          <el-tag
              v-for="holderId in order.holderIds"
              :key="holderId"
              style="margin-right: 5px;">
            {{ holderId }}
          </el-tag>
        </div>
      </div>

      <div style="margin-top: 10px;">
        <span>订购数量：</span>
        <span>{{ order.count }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>订单编号：</span>
        <span>{{ order.orderNumber }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>总价：</span>
        <span>{{ order.totalPrice }}</span>
      </div>
    </el-dialog>

    <el-dialog title="饮料详情" :visible.sync="dialogMilkteaDetailVisible" width="50%">
      <img :src="milktea.imageUrl" alt="饮料" style="width: 100%;">
      <div style="margin-top: 10px;">
        <span>饮料名称：</span>
        <span>{{ milktea.milkteaName }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>描述：</span>
        <pre>
          <span class="description-span">{{ milktea.description }}</span>
        </pre>
      </div>
      <div style="margin-top: 10px;">
        <span>原料：</span>
        <div>
          <el-tag
              v-for="ingredient in milktea.ingredients"
              :key="ingredient"
              style="margin-right: 5px;">
            {{ ingredient }}
          </el-tag>
        </div>
      </div>
      <div style="margin-top: 10px;">
        <span>类型：</span>
        <span>{{ milktea.type }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>价格：</span>
        <span>{{ milktea.price }} 元</span>
      </div>
      <div v-if="!milktea.whetherToList" style="display: flex; justify-content: flex-end; margin-top: 10px;">
        <img src="http://127.0.0.1:8099/shared/files/67fcc60a50204b43a0166a27b907fe21.png" alt="已下架提示" style="max-width: 200px;">
      </div>
    </el-dialog>

    <el-dialog title="顾客详情" :visible.sync="dialogCustomerDetailVisible" width="50%">
      <div style="margin-top: 10px;">
        <span>昵称：</span>
        <span>{{ fromCustomer.nickname }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>手机号码：</span>
        <span>{{ fromCustomer.phone }}</span>
      </div>
      <div style="margin-top: 10px;">
        <span>性别：</span>
        <span>{{ fromCustomer.sex }}</span>
      </div>
    </el-dialog>




  </div>
</template>

<script>
import {defineComponent} from "vue";
import request from "@/utils/request";
import _ from 'lodash';

export default defineComponent({
  name: "CancelOrder",
  data(){
    return{
      lastSearchParams: {}, // 新增用于存储上一次搜索参数的对象
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      orderNumber: "",
      whetherOnlyShowUnreplied: true,

      order: {},
      milktea: {},
      fromCustomer: {},

      selectedRow: {},
      dialogOrderDetailVisible: false,

      dialogRequestDetailVisible: false,

      dialogMilkteaDetailVisible: false,
      dialogCustomerDetailVisible: false,

      reply: {},
      dialogReplyVisible: false,

    }
  },
  created() {
    // 请求分页查询数据
    this.load()
  },
  methods:{
    load() {
      // 比较当前搜索参数与上一次搜索参数
      const currentParams = {
        className: this.className,
        pageSize: this.pageSize,
        orderNumber: this.orderNumber,
      };
      if (!_.isEqual(currentParams, this.lastSearchParams)) {
        this.pageNum = 1; // 如果参数不同，重置页码
        this.lastSearchParams = { ...currentParams }; // 更新上一次搜索参数
      };




      this.request.get("/merchant/messages/reply-for-cancelling-order/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          orderNumber: this.orderNumber,
          whetherOnlyShowUnreplied: this.whetherOnlyShowUnreplied,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      });

    },

    showOrderDetailDialog(orderNumber) {
      this.request.get("/merchant/orders/orderNumber/"+orderNumber).then(res =>{
        this.order = res.data
      })
      this.dialogOrderDetailVisible = true; // 显示对话框
    },
    showRequestDetailDialog(row) {
      this.reply = {},
          this.selectedRow = row; // 将当前行的数据存储在 selectedRow 中
      this.dialogRequestDetailVisible = true; // 显示对话框
    },

    showMilkTeaDetailDialog(milkteaId){
      this.request.get("/merchant/commodities/"+milkteaId).then(res =>{
        this.milktea = res.data
      })
      this.dialogMilkteaDetailVisible = true;
    },
    showCustomerDetailDialog(fromCustomerId){
      this.request.get("/merchant/individual/id/"+fromCustomerId).then(res =>{
        this.fromCustomer = res.data
      })
      this.dialogCustomerDetailVisible = true;
    },


    reset() {
      this.orderNumber = "";
      this.load();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    getDecisionColor(decision) {
      switch (decision) {
        case false:
          return { color: 'red', fontWeight: 'bold' };
        case true:
          return { color: 'green', fontWeight: 'bold' };
        default:
          return { color: 'black' };
      }
    },
    showAllRequests(){
      this.whetherOnlyShowUnreplied = false;
      this.load();
    },
    onlyShowUnrepliedRequests(){
      this.whetherOnlyShowUnreplied = true;
      this.load();
    },
    save(requestId) {
      this.reply.requestId = requestId;
      if(this.reply.decision == null){
        this.$message.error("必须作出决定！");
        return;
      }

      this.request.post("/merchant/messages/reply-for-cancelling-order", this.reply).then(res => {
        if (res.code === '200') {
          this.$message.success("操作成功")
          this.dialogRequestDetailVisible = false
          this.load()
        } else {
          this.$message.error("操作失败")
        }
      })
    }



  }
})
</script>


<style scoped>
.headerBg {
  background: #eee!important;
}
.fontSize18{
  font-size: 18px;
}
.fontSize12{
  font-size: 12px;
}

/* 可点击文本样式 */
.clickable-text {
  cursor: pointer;
  color: #1890ff; /* 链接颜色 */
  transition: all 0.2s ease;
}

/* 悬停效果 */
.clickable-text:hover {
  color: #40a9ff; /* 悬停时的颜色 */
  transform: scale(1.05); /* 稍微放大 */
}

/* 点击效果 */
.clickable-text:active {
  color: #1890ff; /* 点击时的颜色 */
  transform: scale(0.95); /* 稍微缩小 */
}
</style>
